const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
    //模式
    mode:'development',
    // 入口  多个
    entry: {
    base: './src/base.js',
    login: './src/pages/login/index.js',
    userAdd: './src/pages/userAdd/index.js',
    users: './src/pages/users/index.js',
    userUpdate: './src/pages/userUpdate/index.js',
    },
  // 输出
  output: {
    path: resolve(__dirname, 'dist'), // 所有打包文件所在的根目录
    filename: 'js/[name].[contenthash:8].js', // 打包生成的js文件 (可以带目录)
    clean: true, // 打包时, 先自动清除打包文件夹
  },
  plugins: [ // 创建打包页面的多个plugin
    new HtmlWebpackPlugin({
      template: "./src/pages/index/index.html",// 指定模板文件。
      filename: 'index.html',// 生成的打包页面文件名
      chunks: [],// 引入的js包名
      inject: "body",// 将打包生成的JS文件放置在body尾部
    }),
    new HtmlWebpackPlugin({
      template: "./src/pages/login/index.html",
      filename: 'login.html',
      chunks: ['base', 'login'], 
      inject: "body",
    }),
    new HtmlWebpackPlugin({
      template: "./src/pages/userAdd/index.html",
      filename: 'userAdd.html',
      chunks: ['base', 'userAdd'],
      inject: "body",
    }),
    new HtmlWebpackPlugin({
      template: "./src/pages/users/index.html",
      filename: 'users.html',
      chunks: ['base', 'users'],
      inject: "body",
    }),
    new HtmlWebpackPlugin({
      template: "./src/pages/userUpdate/index.html",
      filename: 'userUpdate.html',
      chunks: ['base', 'userUpdate'],
      inject: "body",
    })
  ],
  devServer: {
    port: 3000, // 端口号
    open: true, // 自动打开浏览器
    proxy: { // 以/api开头的请求, 都由代理服务器转发到接口服务器
      // "/api": "http://localhost:8081"
      "/api": { // 处理以/api开头的请求
        target: "http://localhost:8081", // 转发的目标接口基础地址
        pathRewrite: { // 在转发请求时去掉 /api
          "^/api" : ""
        }
      }
    },
  },
  module:{
    rules: [
      // 处理JS文件 ES6 => ES5
      {
        test: /\.js$/,
        exclude: /node_modules/, // 不进行处理的文件夹
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage', // 只打包使用的ES6新API的实现代码
                  corejs: { version: 2 } // 指定core-js的版本号为2
                }
              ]
            ]
          }
        }
      },
      
      // 处理css文件
      {
        test: /\.css$/,  // 配置css文件的正则
        use: [
          'style-loader', // js文件 => 页面的style标签
          'css-loader'  // css文件 => js文件
        ]
      },
      
      // 处理art文件
      {
        test: /\.art$/,
        loader: "art-template-loader",
      },
    ]
  },
  devtool: 'cheap-module-source-map'
}